<template>
  <div class="hy_footer">
    <div class="hy_footer_box">
      <div class="hy_footer_left">
        <div class="logo"></div>
        <div class="hy_footer_author">Y画懿</div>
      </div>
      <div class="hy_footer_right">
        <ul class="footer_website_info">
          <li>
            <a href="#">关于作者</a>
          </li>
          <li>
            <a href="#">更新日志</a>
          </li>
          <li>
            <a href="#">友情链接</a>
          </li>
          <li>
            <a href="#">留言</a>
          </li>
        </ul>
        <ul class="footer_website_filings">
          <li>
            <a href="#">©2020-2023 Y画懿</a>
          </li>
          <li>
            <a class="beian_li" href="https://beian.mps.gov.cn/#/query/webSearch?code=34122102000230" rel="noreferrer" target="_blank">皖公网安备34122102000230</a>
          </li>
          <li>
            <a href="https://beian.miit.gov.cn/">皖ICP备2021001804号-1</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

</script>
<style scoped>
ul{
  list-style: none;
}
.hy_footer{
  height: 190px;
  width: 100%;
  background: #ffffff;
}
.hy_footer_box{
  display: flex;
  max-width: 1000px;
  height: 100%;
  margin: 20px auto 0;
  //background: pink;
}

.hy_footer_left{
  //display: flex;
  min-width: fit-content;
  position: relative;
  height: 100%;
  flex: 1;
}
.hy_footer_author{
  position: absolute;
  top: 50%;
  left: 55px;
  font-size: 23px;
  font-weight: 100;
  font-family: 宋体;
  white-space: nowrap;
  transform: translateY(-50%);
}
.logo{
  position: relative;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-image: url("https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/blog_logo2.png");
  background-color: #040D21;
  width: 43px;
  height: 43px;
  background-size: 100% 100%;
  border-radius: 50%;
}
.hy_footer_right{
  flex: 4;
  height: 100%;
}
.footer_website_info{
  position: relative;
  top: 40%;
  display: flex;
  justify-content: flex-end;
  font-size: 15px;
  white-space: nowrap;
}
.footer_website_info li{
  margin: 0 10px;
}
.footer_website_info li a:hover{
  color: blue;
}
.footer_website_filings{
  position: relative;
  display: flex;
  justify-content: flex-end;
  top: 50%;
  font-weight: 100;
}
.footer_website_filings li{
  margin: 5px 10px;
  font-size: 10px;
  color: #8e8787;
  white-space: nowrap;
}
.footer_website_filings li a:hover{
  color: blue;
}
.beian_li{
  position: relative;
  padding-left: 16px;
}
.beian_li::after{
  content: "";
  position: absolute;
  z-index: 1;
  width: 13px;
  height: 13px;
  left: 0;
  background-image: url("../assets/image/batb.png");
  background-size:100% 100%;
}
</style>
